{% extends 'migration_app/dashboard_base.html' %}

{% block title %}PolarDB-PG架构管理 - Oracle到PolarDB-PG迁移平台{% endblock %}

{% block page_title %}PolarDB-PG架构管理{% endblock %}

{% block breadcrumb %}
<li class="breadcrumb-item"><a href="{% url 'migration_app:pg_schemas' %}">PolarDB-PG数据库</a></li>
<li class="breadcrumb-item active" aria-current="page">架构管理</li>
{% endblock %}

{% block dashboard_content %}
<div class="row mb-4">
    <div class="col-md-6">
        <form method="get" class="d-flex">
            <div class="input-group">
                <input type="text" name="search" class="form-control" placeholder="搜索架构名称" value="{{ request.GET.search|default:'' }}">
                <button class="btn btn-primary" type="submit">
                    <i class="fas fa-search"></i> 搜索
                </button>
            </div>
        </form>
    </div>
    <div class="col-md-6 text-end">
        <button type="button" class="btn btn-success me-2" data-bs-toggle="modal" data-bs-target="#refreshSchemasModal">
            <i class="fas fa-sync"></i> 刷新架构列表
        </button>
        <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#createSchemaModal">
            <i class="fas fa-plus"></i> 创建新架构
        </button>
    </div>
</div>

<div class="card">
    <div class="card-header">
        <div class="row align-items-center">
            <div class="col">
                <i class="fas fa-table me-1"></i> PolarDB-PG数据库架构列表
            </div>
        </div>
    </div>
    <div class="card-body">
        <div class="table-responsive">
            <table class="table table-hover table-striped">
                <thead class="table-light">
                    <tr>
                        <th>架构名称</th>
                        <th>所有者</th>
                        <th>表数量</th>
                        <th>视图数量</th>
                        <th>大小</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>
                    <!-- 示例数据，实际应从数据库获取 -->
                    <tr>
                        <td>public</td>
                        <td>postgres</td>
                        <td>12</td>
                        <td>3</td>
                        <td>25.4 MB</td>
                        <td>
                            <div class="btn-group btn-group-sm">
                                <a href="#" class="btn btn-outline-primary">
                                    <i class="fas fa-eye"></i> 查看
                                </a>
                                <a href="#" class="btn btn-outline-warning">
                                    <i class="fas fa-edit"></i> 编辑
                                </a>
                                <a href="#" class="btn btn-outline-danger">
                                    <i class="fas fa-trash"></i> 删除
                                </a>
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td>hr</td>
                        <td>postgres</td>
                        <td>7</td>
                        <td>2</td>
                        <td>8.2 MB</td>
                        <td>
                            <div class="btn-group btn-group-sm">
                                <a href="#" class="btn btn-outline-primary">
                                    <i class="fas fa-eye"></i> 查看
                                </a>
                                <a href="#" class="btn btn-outline-warning">
                                    <i class="fas fa-edit"></i> 编辑
                                </a>
                                <a href="#" class="btn btn-outline-danger">
                                    <i class="fas fa-trash"></i> 删除
                                </a>
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td>oe</td>
                        <td>postgres</td>
                        <td>10</td>
                        <td>4</td>
                        <td>15.7 MB</td>
                        <td>
                            <div class="btn-group btn-group-sm">
                                <a href="#" class="btn btn-outline-primary">
                                    <i class="fas fa-eye"></i> 查看
                                </a>
                                <a href="#" class="btn btn-outline-warning">
                                    <i class="fas fa-edit"></i> 编辑
                                </a>
                                <a href="#" class="btn btn-outline-danger">
                                    <i class="fas fa-trash"></i> 删除
                                </a>
                            </div>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>

<!-- 刷新架构模态框 -->
<div class="modal fade" id="refreshSchemasModal" tabindex="-1" aria-labelledby="refreshSchemasModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="refreshSchemasModalLabel">刷新PolarDB-PG架构列表</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <p>确定要刷新PolarDB-PG数据库架构列表吗？这将重新连接数据库并获取最新的架构信息。</p>
                <div class="alert alert-info">
                    <i class="fas fa-info-circle me-2"></i> 根据数据库大小，此操作可能需要一些时间。
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary">确认刷新</button>
            </div>
        </div>
    </div>
</div>

<!-- 创建新架构模态框 -->
<div class="modal fade" id="createSchemaModal" tabindex="-1" aria-labelledby="createSchemaModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="createSchemaModalLabel">创建新架构</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form id="create-schema-form">
                    <div class="mb-3">
                        <label for="schema_name" class="form-label">架构名称</label>
                        <input type="text" class="form-control" id="schema_name" name="schema_name" required>
                        <div class="form-text">架构名称应该是小写字母，数字和下划线的组合。</div>
                    </div>
                    <div class="mb-3">
                        <label for="schema_owner" class="form-label">所有者</label>
                        <select class="form-select" id="schema_owner" name="schema_owner" required>
                            <option value="postgres">postgres</option>
                            <option value="migration_user">migration_user</option>
                        </select>
                    </div>
                    <div class="mb-3">
                        <label for="schema_description" class="form-label">描述</label>
                        <textarea class="form-control" id="schema_description" name="schema_description" rows="3"></textarea>
                    </div>
                    <div class="mb-3 form-check">
                        <input type="checkbox" class="form-check-input" id="grant_public" name="grant_public">
                        <label class="form-check-label" for="grant_public">授予PUBLIC使用权限</label>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary" id="create-schema-btn">创建架构</button>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
    // 示例脚本：刷新架构
    document.addEventListener('DOMContentLoaded', function() {
        // 刷新架构
        const refreshBtn = document.querySelector('#refreshSchemasModal .btn-primary');
        refreshBtn.addEventListener('click', function() {
            // 显示加载提示
            this.innerHTML = '<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> 刷新中...';
            this.disabled = true;
            
            // 模拟AJAX请求，实际应该调用后端API
            setTimeout(function() {
                // 关闭模态框
                const modal = bootstrap.Modal.getInstance(document.getElementById('refreshSchemasModal'));
                modal.hide();
                
                // 提示刷新成功
                alert('架构列表刷新成功！');
                
                // 重新加载页面
                // window.location.reload();
                
                // 重置按钮
                refreshBtn.innerHTML = '确认刷新';
                refreshBtn.disabled = false;
            }, 2000);
        });
        
        // 创建新架构
        const createSchemaBtn = document.getElementById('create-schema-btn');
        createSchemaBtn.addEventListener('click', function() {
            const form = document.getElementById('create-schema-form');
            if (!form.checkValidity()) {
                form.reportValidity();
                return;
            }
            
            // 显示加载提示
            this.innerHTML = '<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> 创建中...';
            this.disabled = true;
            
            // 获取表单数据
            const schemaName = document.getElementById('schema_name').value;
            
            // 模拟AJAX请求，实际应该提交表单到后端
            setTimeout(function() {
                // 关闭模态框
                const modal = bootstrap.Modal.getInstance(document.getElementById('createSchemaModal'));
                modal.hide();
                
                // 提示创建成功
                alert(`架构 ${schemaName} 创建成功！`);
                
                // 重新加载页面
                // window.location.reload();
                
                // 重置按钮和表单
                createSchemaBtn.innerHTML = '创建架构';
                createSchemaBtn.disabled = false;
                form.reset();
            }, 1500);
        });
    });
</script>
{% endblock %} 